<template>
  <div>
    <!-- 布局页面文档结构 -->
    <!-- 标题 -->
    <div class="title">
      <van-sticky>
        <van-nav-bar title="易洁家政" />
      </van-sticky>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="item in swipeData" :key="item.id">
          <img :src="item.url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 栏目 -->
    <div class="category">
      <van-grid :column-num="3" :border='false'>
        <van-grid-item
          @click="toProduct(index,item.id)"
          v-for="(item,index) in categoryData"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
        />
      </van-grid>
    </div>
    <!-- 产品 -->
    <div class="product">
      <van-card
        v-for='item in productData'
        :key="item.id"
        :num="item.category.num"
        :price="item.price + '.00元'"
        :desc="item.description"
        :title="item.name"
        :thumb="item.photo"
      />
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script>
import {get,post} from '@/http/axios'
import {mapActions,mapState} from 'vuex';

export default {
  data(){
    return {
      // 轮播图数据
      swipeData:[]
    }
  },
  created(){
    this.findAllSwipe();
    this.findAllCategory();
    this.findAllProduct();
  },
  computed:{
    // 引入栏目数据  参数:命名空间-模块名字 2.要引入的数据
    ...mapState('category',['categoryData']),
    // 引入产品数据
    ...mapState('product',['productData'])
  },
  methods:{
    // 跳转到产品页面
    toProduct(index,id){
      this.$router.push({
        path:"product",
        query:{index,id}
      })
    },
    // 引入查询所有栏目方法
    ...mapActions('category',['getAllCategoryData']),
    // 引入查询所有产品方法
    ...mapActions('product',['getAllProductData']),
    // 查询所有正常状态轮播图
    async findAllSwipe(){
      let res =await get('/carousel/query',{status:'正常'});
      this.swipeData=res.data.data;
    },
    // 查询所有栏目
    findAllCategory(){
      let params={
        page:1,
        pageSize:100
      }
      this.getAllCategoryData(params);
    },
    // 查询所有产品
    findAllProduct(){
      let params={
        page:1,
        pageSize:100
      }
      this.getAllProductData(params)
    }
  }
}
</script>
<style scoped>
/* 处理轮播图样式
   */
.swipe {
  width: 100%;
  height: 150px;
}
img {
  width: 100%;
  height: 150px;
}
</style>